<template>
	<view class="">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<f-navbar :title="$t('pagetitle.loginname')" fontColor="#fff" gradient="linear-gradient(to right, #004884, #004884)"  navbarType='2' @leftClick="$tools.goJump('/pages/my/myInfo',{},'','tab')"></f-navbar>
<mxl-dybg bg="background-color: #FFE53B;background-image: linear-gradient(147deg, #004884 0%, #004884 74%);">
<template>
		<view class="f__login">
            <!-- 验证码登录 -->
            <view class="loginPhone">
			<view style="width:80%;margin:6px auto 20px auto;">
				<u--image :src="logo" mode="widthFix" width="100%" height="auto" radius="10" v-if="logo"></u--image>
			</view>
				<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" labelWidth="auto" errorType="toast">
					<u-form-item prop="username">
					<u--input
						prefixIcon="account"
						border="surround"
						shape="circle"
						fontSize="20"
						color="#777777"
						:prefixIconStyle="{color:PrimaryColor}"
						:customStyle="{border:'#ffffff',background:'#eeeeee'}"
						placeholderStyle="font-size:14px"
						v-model="model.username"
						:placeholder="$t('pls_username')"
						type="text"/>
					</u-form-item>
					<u-form-item prop="password">
					<u--input
						prefixIcon="lock"
						border="surround"
						shape="circle"
						fontSize="20"
						color="#777777"
						:prefixIconStyle="{color:PrimaryColor}"
						:customStyle="{border:'#ffffff',background:'#eeeeee'}"
						placeholderStyle="font-size:14px"
						v-model="model.password"
						:placeholder="$t('pls_pwd')"
						type="password"/>
					</u-form-item>
				
                <u-button class="submitbtn" :style="'background: linear-gradient(to right, '+PrimaryColor+', #002884)'"
				@click="onSubmit" :disabled="loadstatus" :loading="loadstatus" loadingText="login..">
				{{$t('confirm')}}
				</u-button>
                <view class="agreement u-flex u-flex-between">
					<view class="u-flex u-flex-8">
                    <view class="icon u-flex" :style="{borderColor:isAgree?PrimaryColor:'#eee'}" @click="isAgree = !isAgree">
                        <view v-if="isAgree">
                            <u-icon name="checkbox-mark" :size="14" :color="PrimaryColor"></u-icon>
                        </view>
                    </view>
                    <view class="text">{{$t('iagree')}}</view>
                    <view class="protocol" @tap="$tools.goJump('/pagesPackageA/info/view_accord',{id:'',unique:'lagal'+lang})">{{$t('agreement')}}</view>
					</view>
					
                </view>

				<view class="agreement u-flex u-flex-between">
					<view  @tap="$tools.goJump('/pages/user/account/findPassword/findPassword')">{{$t('forgotpassword')}}</view>
					<view  @tap="$tools.goJump('/pages/user/account/register/username-register')">{{$t('register')}}</view>
				</view>
				</u--form>
            </view>
			
    <view class="otherLogin">
      <view style="text-align: center;display: inline-block;width:100%;">
        <u-divider :text="$t('otherLoginMethods')" textColor="#ffffff"></u-divider>
		<div  class="u-flex u-flex-middle">
			<div id="g_id_onload"
				 data-client_id="817664663139-cb6ivgu2tavbnmtsck31rekv4rbb7u6m.apps.googleusercontent.com"
				 data-context="signin"
				 data-ux_mode="popup"
				 data-callback="googlelogin"
				 data-auto_prompt="false">
			</div>
			<div class="g_id_signin"
				 data-type="standard"
				 data-shape="rectangular"
				 data-theme="outline"
				 data-text="signin_with"
				 data-size="large"
				 data-logo_alignment="left">
			</div>
		</div>
		
		<!-- #ifdef MP-WEIXIN -->
		tips:微信可能不支持google登陆。
		<!-- #endif -->
      </view>

    </view>
	<view class="bottombar"></view>
	</view>
</template>
</mxl-dybg>
	
</view>
</template>

<script>
var clear;
import { mapState, mapMutations } from 'vuex';
import { loginApp } from '@/config/login';
import base from '@/config/baseUrl.js';
import fNavbar from '@/components/module/f-navbar/f-navbar';
import { api_login,api_googlelogin } from '@/config/api.js';
import mxlDybg from '@/components/mxl-Dybg/Dybg';
export default {
    components:{
        fNavbar,mxlDybg
    },
	data() {
		return {
            isAgree: true, //是否同意协议
		    loadstatus: false,
		    loadstxt:'loading',
			lang:this.$i18n.locale,
			logo:'',
			model: {
				/* 账号 */
				username: "",
				/* 密码 */
				password: "",
			},
			rules: {
				username: [
				  {
					required: true,
					message: this.$t('pls_username'),
					trigger: ["change", "blur"],
				  },
				],
				password: [
				  {
					required: true,
					message: this.$t('pls_pwd'),
					trigger: ["change", "blur"],
				  },
				  {
					min: 6,
					max: 20,
					message: '密码长度在6到20个字符',
					trigger: ["change", "blur"],
				  },
				 //  {
					// pattern: /^[0-9a-zA-Z]*$/g,
					// transform(value) {
					//   return String(value);
					// },
					// message: '密码为字母或数字',
					// trigger: ["change", "blur"],
				 //  },
				],
			  }
		};
	},
	computed:{
	    ...mapState(['PrimaryColor','extConfig','siteInfo'])
	},
	//第一次加载
	async onLoad(e) {
		await this.$store.dispatch("getsiteInfo",{bid:this.extConfig.bid}).then(rs=>{
			this.logo=this.siteInfo.site.logo
		});
		//this.loadjs()
	Promise.resolve().then(() => this.onloadJs()).then(() => {
		console.log('load ok')
    })

	},
mounted(){
	window.googlelogin = (resp)=>{
	    let clientId=resp.clientId
		let credential=resp.credential
            let httpData = {
                clientId: clientId,
				credential:credential
            }

        api_googlelogin(httpData).then((res) => {
            console.log(res,'shpInfo')
					// 储存登录信息
					let userInfo = {
					    ...res,
						userId:res.member_id,
					    token:true,//token用于判断是否登录
					}
					this.setUserInfo(userInfo)
					uni.showToast({
						title: 'Login succeeded~',
						icon: 'none'
					});
					this.loadstatus = false;
						setTimeout(()=>{
							this.$tools.goJump('/pages/my/myInfo',{},'','launch')
						},500)
        }).catch((e) => {console.log(e,'catch')});
	}
},
	//方法
	methods: {
        ...mapMutations(['setUserInfo']),

		loadjs(){
			var script = document.createElement('script');
			script.src="https://accounts.google.com/gsi/client";
			document.body.appendChild(script);
			
		},
	addScript(url) {
	    let head = document.getElementsByTagName('head')[0];
	    let script = document.createElement('script');
	    script.type = 'text/javascript';
	    script.src = url;
	    head.appendChild(script);
	},
	onloadJs() {
	    this.addScript("https://accounts.google.com/gsi/client")
	    return Promise.resolve()
	},
        // 手机号登录
        onSubmit() {
            if (!this.isAgree) {
                uni.showToast({
                	title: this.$t('desc_useragreement'),
                	icon: 'none'
                });
            	return;
            }
			this.$refs.uForm.validate().then(res => {
				this.loadstatus = true;
				api_login({
					account: this.model.username,
					password: this.model.password,
					acc_type:'',//留空就是自动检测帐号格式
					captcha_id:'',
					captcha_code:''
				}).then((res) => {
					// 储存登录信息
					let userInfo = {
					    ...res,
						userId:res.member_id,
					    token:true,//token用于判断是否登录
					}
					this.setUserInfo(userInfo)
					uni.showToast({
						title: 'Login succeeded~',
						icon: 'none'
					});
					this.loadstatus = false;
					// setTimeout(()=>{
					// 	uni.navigateBack()
					// },500)
						setTimeout(()=>{
							this.$tools.goJump('/pages/my/myInfo',{},'','launch')
						},500)
				}).catch((err) =>{
					this.loadstatus = false;
					console.log(err,'catch')
				})

			}).catch(errors => {})
        },
    
	}
};
</script>
<style lang="scss" scoped>

.f__login {
    z-index: 99;
	// background: url(@/static/imgs/bg1.png) center top no-repeat,linear-gradient(to right, #ff8f77, #fe519f);
	// background-position: 0px 0px;
	// background-size: 100% auto;
	min-height:calc(100vh - var(--status-bar-height) - var(--window-top));
	margin-top: 25%;
	.bottombar{
		position: fixed;
		bottom: 0px;
		background: url(@/static/imgs/bg2.png) center bottom no-repeat;
		height:85px;
		width: 100%;
	}
.loginPhone{
	width: 90%;
	padding: 40rpx;
	margin: 0 5%;
	font-size: 28rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
	z-index: 9;
    .agreement{
        padding-top: 24rpx;
        .icon{width: 36rpx;height: 36rpx;border-radius: 36rpx;border: 1rpx solid #eee;justify-content: center;}
        .text{padding-left: 10rpx;font-size: 26rpx;color: #999;}
        .protocol{font-size: 26rpx;color: #333;}
    }
	.submitbtn{
		margin-top: 10px;
		font-size: 28rpx;
		background: linear-gradient(to right, #ff8f77, #fe519f);
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
	}
	
	/deep/ input {
	}
}

}

</style>
